var svgNS = "http://www.w3.org/2000/svg";

function simpleSlider(id, parentNode, functionToCall, value, x, y, width, height)
{
	this.init(id, parentNode, functionToCall, value, x, y, width, height);
}

simpleSlider.prototype.init = function(id, parentNode, functionToCall, value, x, y, width, height)
{
	this.id = id; //the id where all new content is appended to
	this.parentNode = parentNode; //the id or node reference of the parent group where the button can be appended
	this.functionToCall = functionToCall; //function to be called if button was pressed
	this.value = value;
	this.x = x; //left of button rectangle
	this.y = y; //top of button rectangle
	this.width = width; //button rectangle width
	this.height = height; //button rectangle height
	this.createSimpleSlider(); //method to initialize button
	this.dragging = false;
}

simpleSlider.prototype.createSimpleSlider = function()
{
	var result = this.testParent();
	if (result)
	{
		this.background = document.createElementNS(svgNS,"rect");
		this.background.setAttributeNS(null,"x",this.x);
		this.background.setAttributeNS(null,"y",this.y);
		this.background.setAttributeNS(null,"rx",8);
		this.background.setAttributeNS(null,"ry",8);
		this.background.setAttributeNS(null,"width",this.width);
		this.background.setAttributeNS(null,"height",this.height);
		this.background.setAttributeNS(null,"style","fill:#000000;");

		var startPos = this.y + this.height - ((this.height-1) * this.value / 100);
		this.foreground = document.createElementNS(svgNS,"rect");
		this.foreground.setAttributeNS(null,"x",this.x + 2);
		this.foreground.setAttributeNS(null,"y", startPos - 2);
		this.foreground.setAttributeNS(null,"rx",8);
		this.foreground.setAttributeNS(null,"ry",8);
		this.foreground.setAttributeNS(null,"width",this.width - 4);
		this.foreground.setAttributeNS(null,"height",((this.height-1) * this.value / 100));
		this.foreground.setAttributeNS(null,"style","fill:url(#volumeGradient);");

		this.shine = document.createElementNS(svgNS,"rect");
		this.shine.setAttributeNS(null,"x",this.x + 2);
		this.shine.setAttributeNS(null,"y", startPos - 2);
		this.shine.setAttributeNS(null,"rx",8);
		this.shine.setAttributeNS(null,"ry",8);
		this.shine.setAttributeNS(null,"width",this.width - 4);
		this.shine.setAttributeNS(null,"height",((this.height-1) * this.value / 100) + 1);
		this.shine.setAttributeNS(null,"style","fill:url(#volumeShineGradient)");

		this.parentGroup.appendChild(this.background);
		this.parentGroup.appendChild(this.foreground);
		this.parentGroup.appendChild(this.shine);
	}
	else
	{
		alert("could not create or reference 'parentNode' of button with id '"+this.id+"'");
	}
}

simpleSlider.prototype.setValue = function(val)
{
	if (val > 100)
	{
		this.value = 100;
	}
	else if (val < 0)
	{
		this.value = 0;
	}
	else
	{
		this.value = val;
	}

	var startPos = this.y + this.height - ((this.height-1) * this.value / 100);
	this.foreground.setAttributeNS(null,"x",this.x + 2);
	this.foreground.setAttributeNS(null,"y", startPos - 2);
	this.foreground.setAttributeNS(null,"rx",8);
	this.foreground.setAttributeNS(null,"ry",8);
	this.foreground.setAttributeNS(null,"width",this.width - 4);
	this.foreground.setAttributeNS(null,"height",((this.height-1) * this.value / 100));
	this.foreground.setAttributeNS(null,"style","fill:url(#volumeGradient);");

	this.shine.setAttributeNS(null,"x",this.x + 2);
	this.shine.setAttributeNS(null,"y", startPos - 2);
	this.shine.setAttributeNS(null,"rx",8);
	this.shine.setAttributeNS(null,"ry",8);
	this.shine.setAttributeNS(null,"width",this.width - 4);
	this.shine.setAttributeNS(null,"height",((this.height-1) * this.value / 100) + 1);
	this.shine.setAttributeNS(null,"style","fill:url(#volumeShineGradient)");
}

//test if parent group exists
simpleSlider.prototype.testParent = function()
{
    //test if of type object
    var nodeValid = false;
    this.parentGroup = document.createElementNS(svgNS,"g");
	this.parentGroup.addEventListener("mousedown",this,false);
	this.parentGroup.addEventListener("mousemove",this,false);
	this.parentGroup.addEventListener("mouseup",this,false);
	this.parentGroup.addEventListener("click",this,false);
    if (typeof(this.parentNode) == "object")
    {
    	if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g")
    	{
    		this.parentNode.appendChild(this.parentGroup);
    		nodeValid = true;
    	}
    }
    else if (typeof(this.parentNode) == "string")
    {
    	//first test if button group exists
    	if (!document.getElementById(this.parentNode))
    	{
        	this.parentGroup.setAttributeNS(null,"id",this.parentNode);
        	document.documentElement.appendChild(this.parentGroup);
        	nodeValid = true;
   		}
   		else
   		{
       		document.getElementById(this.parentNode).appendChild(this.parentGroup);
       		nodeValid = true;
   		}
   	}
   	return nodeValid;
}

//event handling
simpleSlider.prototype.handleEvent = function(evt)
{
	if (evt.type == "mousedown")
	{
		this.dragging = true;
		this.setValue((1-((evt.clientY - this.y - 4) / this.height)) * 100);
	}
	if (evt.type == "mousemove")
	{
		if (this.dragging)
		{
			this.setValue((1-((evt.clientY - this.y - 4) / this.height)) * 100);
		}
	}
	if (evt.type == "mouseup")
	{
		this.dragging = false;
	}
	if (evt.type == "click")
	{
		//for some strange reasons I could not forward the evt object here ;-(, the code below using a literal is a workaround
		//attention: only some of the evt properties are forwarded here, you can add more, if you need them
		this.setValue((1-((evt.clientY - this.y) / this.height)) * 100);
		var timerEvt = {x:evt.clientX,y:evt.clientY,type:evt.type,detail:evt.detail,timeStamp:evt.timeStamp}
		this.functionToCall();
	}
}

